<template>
  <div ref="container" class="x6-container"></div>
  <div class="toolbar">
    <button @click="addRectangle">Add Rectangle</button>
    <button @click="addCircle">Add Circle</button>
    <button @click="exportGraph">Export Graph</button>
    <button @click="importGraph">Import Graph</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Graph } from '@antv/x6';

const container = ref(null);
const graph = ref(null);

onMounted(() => {
  graph.value = new Graph({
    container: container.value,
    width: 800,
    height: 600,
    grid: true,
  });

  const rect = graph.value.addNode({
    x: 40,
    y: 40,
    width: 100,
    height: 40,
    label: 'Hello',
  });

  const circle = graph.value.addNode({
    shape: 'circle',
    x: 160,
    y: 160,
    width: 60,
    height: 60,
    label: 'World',
  });

  graph.value.addEdge({
    source: rect,
    target: circle,
  });
});

const addRectangle = () => {
  graph.value.addNode({
    x: Math.random() * 600,
    y: Math.random() * 400,
    width: 100,
    height: 40,
    label: 'Rectangle',
  });
};

const addCircle = () => {
  graph.value.addNode({
    shape: 'circle',
    x: Math.random() * 600,
    y: Math.random() * 400,
    width: 60,
    height: 60,
    label: 'Circle',
  });
};

const exportGraph = () => {
  const data = graph.value.toJSON();
  console.log('Exported Graph:', JSON.stringify(data));
};

const importGraph = () => {
  const data = prompt('Paste the graph data here:');
  if (data) {
    graph.value.fromJSON(JSON.parse(data));
  }
};
</script>

<style scoped>
.x6-container {
  border: 1px solid #ccc;
  width: 100%;
  height: 600px;
  margin-bottom: 10px;
}

.toolbar {
  display: flex;
  gap: 10px;
}

button {
  padding: 5px 10px;
  cursor: pointer;
}
</style>